<template>
	<view style="width: 100vw;height: 100vh;">
		<!-- 活动已结束 -->
	 
		<view class=""
			style="width: 750rpx;margin-top:25rpx;padding: 30rpx;">
	 
		 
		<view class="hade_input">
			<view class="" style="width: 80rpx;height: 80rpx;text-align: center;line-height: 88rpx;">
				<image src="@/static/aipicture/sousuo.png" mode=""></image>
			</view>
			<input type="text" class="search_input" :style="[selStyle]" v-model="search_name" @confirm="search"
				placeholder="搜索编号" placeholder-class="search_size">
		</view>
		<!-- 排行榜 -->
		<view class="row_class">
			<view class="">
				<view class="" style="display: flex;text-align: center;">
					<view class="row_tow chunk">
						<view class="row_chunk_image">
							<image :src="list[1].image" class="row_image" mode=""></image>
							<view class="row_ids">
								{{list[1].id}}

							</view>
						</view>
						<view class="row_tid" :style="[selStyle]">
							{{list[1].tid}}
						</view><view class="row_name" :style="[selStyle]" >
													{{list[1].name}}
							 	</view>
					</view>
					<view class="row_one chunk">
						<view class="row_chunk_image">
							<image :src="list[0].image" class="row_image" mode=""></image>
							<view class="row_ids">
								{{list[0].id}}

							</view>
						</view>
						<view class="row_tid" :style="[selStyle]">
							{{list[0].tid}}
						</view>
						<view class="row_name" :style="[selStyle]" >
													{{list[0].name}}
							 	</view>
					</view>
					<view class="row_three chunk">
						<view class="row_chunk_image">
							<image :src="list[2].image" class="row_image" mode=""></image>
							<view class="row_ids">
								{{list[2].id}}

							</view>
						</view>
						<view class="row_tid" :style="[selStyle]">
							{{list[2].tid}}
						</view>
						<view class="row_name" :style="[selStyle]" >
													{{list[2].name}}
							 	</view>
					</view>

				</view>
                 <view class="switch_class" >
                 		<view class="" :style="{color:knavTitleColor}" >只看我的作品 </view>
                 					<switch :style="[selStyle]" :checked="false" />
                 </view>
		<view class="">
			 <view class="" v-for="(item,index) in list" style="">
				 <view class="" v-if="index+1>3" style="margin: 20rpx auto;padding:20rpx;width: 690rpx;height: 150rpx;background: #F8F6FF;border-radius: 20rpx;display: flex;justify-content: space-between;">
				 	 
				 	 	<view class="row_tx">
				 	 		<image :src="item.image" style="width: 108rpx;height: 108rpx;border-radius: 15rpx;" mode=""></image>
				 	 </view>
					 <view class="row_mess" :style="[selStyle]">
					 	 <view class="" style="font-weight: 400;font-size: 24rpx;">
					 	 	共识票
					 	 </view>
						 <view class="" style="margin-top:22rpx;font-weight: 600;font-size: 28rpx;">
						 	{{item.name}}
						 </view>
					 </view>
					 
					 <view class="row_grade" :style="[selStyle]">
					 	{{item.id}}
					 </view>
				 </view>
			
			 	
			 </view>
		</view>
			</view>

		</view>
            <view class="" style="height: 100rpx;">
            	
            </view>

	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_name: "", //搜索框
				selStyle: {
					'--selectColorSize': this.$store.state.selectColorSize, //字体颜色
					'--buttonBcak': this.$store.state.buttonBcak, //按钮颜色
					'--borderSty': this.$store.state.borderSty, //选中背景线颜色
					'--QianmenonlyBackgournd': this.$store.state.QianmenonlyBackgournd, //单个背景颜色
					QianmenonlyBackgournd2: this.$store.state.QianmenonlyBackgournd2, //单个背景颜色
				},
				tabCurrent: 1,
				tabDataCurrent: 1,

				selectColorSize: this.$store.state.selectColorSize, //字体颜色
				buttonBcak: this.$store.state.buttonBcak, //按钮颜色
				QianmenonlyBackgournd: this.$store.state.QianmenonlyBackgournd, //浅色
				ColorSize: this.$store.state.ColorSize, //字体颜色
				pgList: [30],
				list: [{
					id: 1,
					image: '../../../static/login/logo2.png',
					tid: '12737111566',
					name: '一等奖***',
					mess: '拥有冠名版权参加作品加成百分10共识票',
					state: '预约',
					ticket: "共识票：238944"

				}, {
					id: 2,
					image: '../../../static/login/logo.png',
					tid: '12737111566 ',
					name: '二等奖***',
					mess: '拥有冠名版权参加作品加成百分10共识票',
					state: '已结束',
					ticket: "共识票：238944"

				}, {
					id: 3,
					image: '../../../static/login/logo3.png',
					tid: '12737111566',
					name: '三等奖***',
					mess: '拥有冠名版权参加作品加成百分10共识票',
					state: '预约',
					ticket: "共识票：238944"

				}, {
					id: 4,
					image: '../../../static/test.png',
					tid: '1273712',
					name: '四等奖****备份',
					mess: '拥有冠名版权参加作品加成百分10共识票',
					state: '已结束',
					ticket: "共识票：238944"

				}, {
					id: 4,
					image: '../../../static/test.png',
					tid: '127371223',
					name: '2五等奖****备份',
					mess: '拥有冠名版权参加作品加成百分10共识票',
					state: '已结束',
					ticket: "共识票：238944"

				}, {
					id: 5,
					image: '../../../static/test.png',
					tid: '127371223',
					name: '六等奖****备份',
					mess: '拥有冠名版权参加作品加成百分10共识票',
					state: '已结束',
					ticket: "共识票：238944"

				}],
				tabList: [{
					id: 1,
					name: '最新',

				}, {
					id: 2,
					name: '我的',

				}, {
					id: 3,
					name: '共识票',

				}, ],
				dataList: [{
					id: 1,
					name: '优选',

				}, {
					id: 2,
					name: '二次元',

				}, {
					id: 3,
					name: '真实感',

				}, {
					id: 4,
					name: '通用',

				}, ],
				images: [{
						src: '../../../static/test.png'
					},
					{
						src: '../../../static/test2.png'
					},
					{
						src: '../../../static/test2.png'
					}
				],
				currentIndex: 0,
				nextIndex: 1,
				array: [{
						name: 'a'
					},
					{
						name: 'b'
					},
					{
						name: 'c'
					}
				]
			};
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		mounted() {
			setInterval(() => {
				this.currentIndex = (this.currentIndex + 1) % this.images.length;
				this.nextIndex = (this.currentIndex + 1) % this.images.length;
			}, 3000);
		},

		methods: {
			set_tab: function(id) {
				this.tabCurrent = id + 1
			},
			set_data_tab: function(id) {
				this.tabDataCurrent = id + 1
			},
		},
		computed: {
			reversedString() {
				return this.array.map(item => item.name).reverse().join('');
			}
		}
	}
</script>

<style lang="scss" scoped>
 
	.link_1 {
		display: flex;
		margin-top: 30rpx;

	}

	.host {
		// width: 290rpx;
		height: 40rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
		margin-right: 10rpx;
	}

	.explain {
		width: 690rpx;
		// height: 114rpx;
		padding: 20rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #673DE7;
		line-height: 42rpx;
		background: #F5F4FF;
		border-radius: 8rpx;
	}

	.left_link {
		width: 55%;

	}

	.right_link {
		width: 50%;

		.botton {
			float: right;
			width: 296rpx;
			height: 80rpx;

			border-radius: 40rpx;
			font-size: 28rpx;
			text-align: center;
			line-height: 80rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.tab_box {
		width: 400rpx;
		// padding: 30rpx 70rpx 0;\
		display: flex;
		align-items: center;
		justify-content: space-between;

		.sel {
			color: #673DE7;
			font-weight: 600;
		}

		.nsel {
			color: #673DE7;
			font-weight: 400;

		}
	}



	.hade_input {
		margin: 10rpx auto;

		width: 698rpx;
		height: 82rpx;
		background: #F5F4FF;
		border-radius: 36rpx;
		display: flex;

		image {
			width: 36rpx;
			height: 38rpx;
		}
	}

	.search_input {
		font-weight: 500;
		flex: 1;
		height: 80rpx;
		padding-left: 20rpx;
		font-size: 30rpx;
		color: var(--selectColorSize);
	}

	.search_size {
		color: var(--selectColorSize);
	}

	.row_class {
		width: 690rpx;
		margin: 50rpx auto;
	}

	.chunk {
		width: 230rpx;
		height: 300rpx;
	}

	//排行
	.row_image {
		width: 176rpx;
		height: 176rpx;
		border-radius: 20rpx;
	}

	.row_chunk_image {
		position: relative;
		margin-bottom: 20rpx;
	}

	.row_ids {
		position: absolute;
		bottom: -10rpx;
		left: 44%;
	}

	.row_tow {
		margin-top: 30rpx;

		image {
			border: 4rpx solid #31EDFF;
		}

		.row_ids {
			width: 42rpx;
			height: 42rpx;
			background: #31EDFF;
			border-radius: 40rpx;
		}
	}

	.row_one {
		image {
			border: 8rpx solid #FFCF31;
		}

		.row_ids {
			width: 42rpx;
			height: 42rpx;
			background: #FFCF31;
			border-radius: 40rpx;
		}
	}

	.row_three {
		margin-top: 30rpx ;

		image {
			border: 4rpx solid #B6DADE
		}

		.row_ids {
			width: 42rpx;
			height: 42rpx;
			background: #B6DADE;
			border-radius: 40rpx;
		}
	}

	.row_tid {
		margin: 20rpx auto;
		width: 222rpx;
		height: 32rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #ffffff;
		line-height: 32rpx;
		background: var(--buttonBcak);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.row_name{
		margin: 20rpx auto;
		width: 168rpx;
		height: 42rpx;
		background: linear-gradient(135deg, #6958D5 0%, #AD56D7 100%);
		border-radius: 42rpx;
		color: white;
	}
	.switch_class{
		width: 690rpx;
	display: flex;
justify-content: space-between;
height: 60rpx;
margin-top: 40rpx;
	
	}
	/deep/.uni-switch-input-checked{
	// background:#fff !important;
	// border:var(--borderSty) !important;
	border:1px solid #dacfcd !important;
	}
	/deep/.uni-switch-input:after{
	background:var(--buttonBcak) !important;

	}
	.row_tx{
		width: 111rpx;
		height: 111rpx;
	}
	.row_mess{
		width: 430rpx;
		color: var(--selectColorSize);
		text-align: left;
	}
	.row_grade{ 
		width: 45rpx;
		height: 45rpx;
		background: var(--selectColorSize);
	border-radius: 40rpx;
	text-align: center;
	line-height: 45rpx;
	color: white;
	margin-top: 14rpx;
	}
</style>
